<template>
	<view class="content">
		<view class="personCount flex">
			<view >
				<view class="flex personCountNum personCountNumLeft"> 
					<view class="successCount">{{count.successCount}}</view>
					<view>人</view>
				</view>
				<view>
					邀请成功
				</view>
			</view>
	
			<view>
				<view class="flex personCountNum">
					<view class="rodCount">0</view>
					<view>人</view>
				</view>
				<view>
					邀请在路上
				</view>
			</view>
		</view>
		<view class="personList" >
			<view class="listTitle flex" >
				<view>好友名称</view>
				<view>时间</view>
				<view>状态</view>
			</view>
			<view class="list flex" v-for="(item,i) in distributionInfo" :key="i" v-if="distributionInfo.length > 0">
				<view class="username">{{item.username}}</view>
				<view>{{item.createtime}}</view>
				<view>成功</view>
			</view>
			<u-empty v-else text="亲,该时间段还没有邀请记录"></u-empty>
		</view>
		
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	export default {
		data() {
			return {
				distributionInfo:[],
				count:{successCount:0},
			}
		},
		methods: {
			getDistributionInfo(){
				http.POST('user/getUserInvitationCount').then(res=>{
					this.count.successCount = res.data.successCount
					this.distributionInfo = res.data.list;
				})
			}
		},
		onLoad() {
			this.getDistributionInfo()
		}
	}
</script>

<style>
	.flex { display: flex; }
	.content { padding: 20rpx 50rpx; display: flex; flex-direction: column; justify-content: center;}
	.personCount { margin: 50rpx 0;  justify-content: space-around; text-align: center;}
	.personCountNum { justify-content: center; align-items: center; color: #8d949a;}
	.successCount { color: #e9533b; font-size: 70rpx; font-weight: bold;}
	.personCountBorder { border: 1rpx solid #eee; }
	.rodCount { font-size: 70rpx; font-weight: bold; color: #202427;}
	.list,.listTitle {
		color: #222222;
		 padding: 0 10rpx; justify-content: space-around; 
		padding: 10rpx 0;
		
	}
	.listTitle{border-bottom: 1px solid #f3eac9; padding: 25rpx 0;}
	.list {
		padding: 25rpx 0;
	}
	.username { width: 30%;}
</style>
